import React, { FC, useEffect, useState } from 'react';
import { Filter, IFilter } from './filter';
import { ResourceCard, IResource } from '@/components';
import { tags, categories } from '@/config/filter';
import { getResources, SORT } from '@/services/resources';
import { Pagination } from '@mui/material';
import './index.less';

const filterRefer: IFilter[] = [
  {
    label: '资源类型',
    items: categories,
  },
  {
    label: '相关标签',
    items: tags,
  },
];

export const Resources: FC = () => {
  const [resources, setResources] = useState<IResource[]>([]);

  useEffect(() => {
    (async() => {
      const { data } = await getResources({ sort: SORT.LATEST });
      setResources(data);
    })();
  }, []);
  return (
    <div>
      <Filter data={ filterRefer } />
      <div className='filter-container'>
        <div className='filter-data'>
          {
            resources.map(resource =>
              <ResourceCard
                key={ resource.id }
                className="filter-resource"
                { ...resource }
              />
            )
          }
        </div>
        <Pagination
          className='pagination'
          count={10}
          variant="outlined"
          shape="rounded"
        />
      </div>
    </div>
  );
};
